$(function() {
    load();

    /*    切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
       利用事件对象.keyCode判断用户按下回车键（13）。
       声明一个数组，保存数据。
       先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
       之后把最新从表单获取过来的数据，追加到数组里面。
       最后把数组存储给本地存储 (声明函数 savaDate()) */

    $("#title").on("keydown", function(e) {
        if (e.keyCode === 13) {
            // console.log('enter');
            //先读取本地存储原来的数据 封个函数
            let local = getDate();
            // console.log(local);
            if ($(this).val() !== '') {
                //先把数据添加在local数组上  然后再把local存入本地存储
                local.push({ title: $(this).val(), done: false });
                saveData(local);
            } else {
                alert('请添加你的ToDo');
            }
            //渲染加载数据
            load();
            $(this).val("")
        }
    });

    //删除操作
    $("ol,ul").on("click", "a", function() {
        //获取本地存储--》修改数据--》保存到本地--》重新渲染页面
        let data = getDate();
        let index = $(this).attr("id");
        data.splice(index, 1); //splice方法
        saveData(data);
        load();
    });

    //修改复选框
    $("ol,ul").on("click", "input", function() {

        let data = getDate();
        let index = $(this).siblings("a").attr("id");

        data[index].done = $(this).prop("checked"); //固有属性获得 
        saveData(data);
        load();
    });


    //读取本地存储的函数
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    };

    //保存到本地存储
    function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    };

    //渲染加载数据
    function load() {
        var todo = 0;
        var done = 0;
        let data = getDate();
        console.log(data);
        //遍历这个数据

        // 先清空再追加
        $("ol,ul").empty();

        $.each(data, function(i, ele) {
            if (ele.done) {
                $("ul").prepend(`<li><input type='checkbox' checked='checked'><p>${ele.title}</p><a href='javascript:;' id=${i}></a></li>`);
                done++;
            } else {
                $("ol").prepend(`<li><input type='checkbox'  ><p>${ele.title}</p><a href='javascript:;' id=${i}></a></li>`);
                todo++;
            }
            // console.log(ele);

        });

        $("#todocount").text(todo);
        $("#donecount").text(done);
    };
















})